import React, { Component } from 'react'
import ChartBox from 'components/chart'
import { Grid, Dropdown } from 'semantic-ui-react'
import moment from 'moment'
import { OneDay } from 'components/date'
import Heap from './userHeap'
import Work from './userWork'

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      typeValue: 'time',
      time: moment(0, 'HH').zone(+0),
    }
  }

  handleChange = (e, { value }) => this.setState({ value })

  handleDayChange = (day) => {
    this.setState({
      time: moment(day).zone(+0),
    })
  }

  handleTypeChange = (e, { value }) => this.setState({ typeValue: value })

  render() {
    const { match, project } = this.props
    const { projectId } = project
    const { name } = match.params
    const { typeValue, time } = this.state
    const timeStart = time.format()
    const timeEnd = time
      .clone()
      .add(1, 'day')
      .format()
    console.log(timeStart, timeEnd)
    return (
      <React.Fragment>
        <Grid.Row>
          <Grid.Column width={8}>
            <OneDay onChange={this.handleDayChange} />
          </Grid.Column>
        </Grid.Row>
        {typeValue === 'work' && (
          <Grid.Row>
            <Grid.Column width={16}>
              <ChartBox>
                <Work />
              </ChartBox>
            </Grid.Column>
          </Grid.Row>
        )}
        {typeValue === 'time' && (
          <Grid.Column width={16}>
            <Heap name={name} start={timeStart} end={timeEnd} pid={projectId} />
          </Grid.Column>
        )}
      </React.Fragment>
    )
  }
}
